import { CSSProperties, FC, useEffect, useState } from 'react'
import styles from './TextAsset.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { AssetCard } from '@/components/graph/assets/AssetCard/AssetCard'
import { SvgIcon } from '@/components/icons'
import { Text } from '@/components/icons/Text'
import { Input } from 'antd'
import { Port } from '@/components/graph/Port/Port'
import { Graph, Node } from '@antv/x6'
import { observer } from 'mobx-react'
import { useMetaStore } from '@/hooks'
import { StaticLayout } from '@/components/StaticLayout/StaticLayout'

interface ITextAsset {
  cardID?: string
  width?: CSSProperties['width']
  text?: string
  isEditable?: boolean // TODO: infer use cardID
  node?: Node
  graph?: Graph
}

export const TextAsset: FC<ITextAsset> = observer(
  ({ cardID, width, isEditable, text = '', node, graph }) => {
    const c = useColorVar()
    const styleClass = useStyles(styles)
    const metaStore = useMetaStore()

    const textForTest =
      '我期望设计一辆概念车外壳的前脸（引擎盖、前保险杠与车灯）部分，要求整体造型是流线型的，引擎盖与保险杠一体化，车灯棱角尖锐，颜色基调为灰黑色，可以不设计进气口。请帮我总结上述需求。'
    const [textValue, setTextValue] = useState<string>(text)

    const registerAsAsset = async () => {
      await metaStore.registerNonAssetCardAsAsset(cardID, textValue)
    }

    const handleChange = (text: string) => {
      setTextValue(text)
    }

    return (
      <AssetCard
        width={width}
        headerColor={c('DeepBlue-background')}
        cardTitle={'文本'}
        cardIcon={<SvgIcon icon={Text} />}
        isEditable={isEditable}
        registerAsAsset={registerAsAsset}
        node={node}
        graph={graph}
      >
        <div {...styleClass(['layout'])}>
          <StaticLayout>
            <Input.TextArea
              {...styleClass(['textarea'])}
              autoSize={{ minRows: 1, maxRows: 5 }}
              placeholder="Please enter"
              bordered={false}
              value={textValue}
              onChange={(e) => handleChange(e.target.value)}
            />
          </StaticLayout>
          <div {...styleClass(['port-wrapper'])}>
            <Port
              circleColor={c('DeepBlue-main')}
              borderColor={c('DeepBlue-light')}
            />
          </div>
        </div>
      </AssetCard>
    )
  }
)
